﻿/*The outermost container, a ul list. The entire editor is nested in li elements within this unordered list*/
ul.editor
{
	background:#d3d5d5;
	list-style-type: None;
	border-top:solid 1px #bfbfbd;
	border-left:solid 1px #bfbfbd;
	border-bottom:solid 1px #8b8d8c;
	border-right:solid 1px #8b8d8c;
	float: left;
	width: 100%;
	margin: 0px;
	padding: 0px;
}
/*The designarea, this is the editable area that will contain an iframe at runtime, used to host the editor*/
li.editor-designarea
{
	border-top:solid 1px #000;
	border-bottom:solid 1px #BDBEBF;
	background: #FFFFFF;
	clear: both;
	height: 200px;
}
/*The iframe hosting the html editor. This is the iframe whose designmode is set to on 
providing a UI-activated state where you can edit html at designtime eg: type text, display images etc*/
.editor-frame{}

/*The html element inside the iframe document used to host the editor*/
.editor-iframehtmlstyle,
/*The body element inside the iframe document used to host the editor*/
.editor-iframebodystyle
{
	background-color: #FFFFFF;
}
/*when clicking into the editor designview, the currently selected html element will get this style applied.*/
.editor-htmlelementhighlightstyle
{
	background: #E8F0F6;
	border:dotted 1px #5F9BAF;
}

/*the textarea in htmlview*/
textarea.editor-htmlview,
/*color highlighted htmlview*/
div.editor-htmlviewcolorhilight,
/*warnings log*/
div.editor-warningslog
{
	overflow: auto;
	background: #F5F5DC;
	border-style:none;
	border-width: 0px;
	font-family: Calibri, Helvetica, Arial;
	font-size: 16px;
}
div.editor-htmlviewcolorhilight pre 
{
	white-space: pre-wrap; /* css-3 */
	white-space: -moz-pre-wrap !important; /* Mozilla, since 1999 */
	white-space: -pre-wrap; /* Opera 4-6 */
	white-space: -o-pre-wrap; /* Opera 7 */
	word-wrap: break-word; /* Internet Explorer 5.5+ */
}
/*The modal popup*/
table.editor-popup
{
	background: #FFFFFF;
	border:solid 2px #FFFFFF;
}
/*The header portion of the modal popup, includes the caption and the close button*/
tr.editor-popupheader
{
	background:#928f8f;
}
tr.editor-popupheader td a
{
	margin-right:5px;
	float:right;
}
/*Only the caption portion of the modal popup*/
td.editor-popupheadercaption
{
	color: #000;
	font-family: Calibri, Helvetica, Arial;
	font-size: 16px;
	height: 35px;
	padding-left: 5px;
	font-weight:bold;
}
/*holds the popup content*/
tr.editor-popupbody
{
	font-size: Medium;
}
/*dropdown container. This is what we use to dropdown a list of formatblocks,font names,font-sizes etc*/
table.editor-dropdownstyle
{
	background: #FFFFFF;
	border:solid 1px #DCDCDC;
	padding: 4px;
}
tr.editor-dropdownheaderstyle
{
	color: #000;
	font-family: Calibri, Helvetica, Arial;
	font-size: 14px;
	height: 35px;
	font-weight:bold;
}
tr.editor-dropdownheaderstyle td{}
tr.editor-dropdownheaderstyle td a
{
	float:right;
	margin-right:5px;
}
/*when an item is selected in dropdownlist?*/
li.editor-dropdownstyle-selected
{
    background:#0092d2;
}
/*The list containing menu items in the dropdownlists follow*/
ul.editor-dropdownfontsize
{
    text-align:center;
	list-style-type:none;
	width: 220px;
}
ul.editor-dropdownformatblock
{
    list-style-type:none;
	text-align: Center;
	width: 230px;
}
ul.editor-dropdownfontname
{
	list-style-image: url( "Images.Editor.fontname.gif" );
	height: 270px;
	width: 300px;
}
/*we have a custom bullet set for fontname above, so let's make space for it? 20px*/
ul.editor-dropdownfontname li
{
    margin:2px 2px 2px 20px;
}
ul.editor-dropdownspellchecker
{
	height: 250px;
	width: 230px;
	list-style-type:disc;
}
/*we have a custom bullet set for spellcheckeractive applied below, so let's make space for it? 20px*/
ul.editor-dropdownspellchecker li{margin:2px 2px 2px 25px;}
/*The currently selected language in the spellchecker  */
.editor-dropdownspellcheckeractive
{
    background-color:#0092d2;
	list-style-image: url( "Images.Editor.check.gif" );
}

ul.editor-dropdownspellsuggestion
{
	height: 90px;
	width: 150px;
}

li.editor-dropdownspellsuggestion-menu
{
	border-top: solid 1px #B2B3B5;
	background: #F7F7F6;
	font-weight: bold;
	color: Red;
	text-indent: 5px;
	height: 20px;
}
ul.editor-dropdownclassnamelist
{
    list-style-image: url( "Images.Editor.cssclassname.gif" );
	height: 180px;
	width: 200px;
}
ul.editor-dropdownclassnamelist li {margin:2px 2px 2px 30px;}
/*This is a special command menu used in the word suggestion dropdownlist ( the part displaying the ignore word button )*/
ul.editor-menulist a
{
    background:#c8e2f7;
    text-decoration:none;
    padding:2px;
}
ul.editor-menulist a:hover
{
    background:#709dc8;
    color:#e0e9e9;
    text-decoration:underline;
}
/*mouseover hover state on items in the dropdownlists*/
ul.editor-dropdownfontsize a,
ul.editor-dropdownformatblock a,
ul.editor-dropdownfontname a,
ul.editor-dropdownspellchecker a,
ul.editor-dropdownspellsuggestion a,
ul.editor-dropdownspellsuggestion a,
ul.editor-dropdownclassnamelist a
{
    text-decoration:none;
    padding:1px;
}
/*mouseover hover state on items in the dropdownlists*/
ul.editor-dropdownfontsize a:hover,
ul.editor-dropdownformatblock a:hover,
ul.editor-dropdownfontname a:hover,
ul.editor-dropdownspellchecker a:hover,
ul.editor-dropdownspellsuggestion a:hover,
ul.editor-dropdownspellsuggestion a:hover,
ul.editor-dropdownclassnamelist a:hover
{
	background: #93d2f3;
	text-decoration:underline;
}
/*toolbarsets by index*/
li.editor-0,li.editor-1,li.editor-2,li.editor-3,li.editor-4
{
	float: left;
	border:solid 1px #646464;
	height: 25px;
	margin:2px;
}
li.editor-0
{
	background: url( "Images.Editor.bar1.gif" ) no-repeat;
	width: 291px;
}
li.editor-1
{
	background: url( "Images.Editor.bar2.gif" ) no-repeat;
	width: 300px;
}
li.editor-2
{
	background: url( "Images.Editor.bar3.gif" ) no-repeat;
	width: 132px;
}
li.editor-3
{
	background: url( "Images.Editor.bar4.gif" ) no-repeat;
	width: 384px;
}
li.editor-4
{
	background: url( "Images.Editor.bar5.gif" ) no-repeat;
	width: 266px;
}
/*element at the right end of toolbarset eg: 
		<li..class=Editor1-0>
			<a class=toolbarbutton>item 1</a>
			<b class=toolbarbuttonseparator></b>
			<a class=toolbarbutton>item 2</a>
			<a class=toolbarsetoptions></a><!--and on the right edge-->
		</li>*/
a.editor-toolbarsetoptions
{
    width:13px;
    display: block;
	height: 25px;
}

/*the a element represents an icon in the toolbarset*/
a.editor-toolbarbutton
{
	display: block;
	float: left;
	height: 25px;
	width: 24px;
}
.editor-tab
{
	border-top:solid 1px #FFFFFF;
	float: left;
	width: 100%;
}
.editor-tabcontainer
{
	background: url( "Images.Editor.tabs.gif" ) no-repeat top left;
	height: 28px;
	margin:2px;
}
/**/
.editor-tab a
{
	display: block;
	float: left;
	height: 28px;
}

/*The style of the floating toolbar. This is the container that contains all the toolbarsets and floats it*/
div.editor-floatingtoolbar
{
	background:#d3d5d5;
	border-top:1px solid #E2E2E2;
	border-left:1px solid #E2E2E2;
	border-bottom:1px solid #878787;
	border-right:1px solid #878787;
}
/*The close button in the floating toolbar (floating toolbar is activated when explicitly setting  EnableToolBarFloat="True"*/
div.editor-floatingtoolbar a.tristateclosebutton16x48 
{
    margin:2px;
}
.editor-misspelledword
{
	background: url(  "Images.Editor.underline.gif" ) repeat-x bottom left;
}
/*multifile uploader displayed via the hyperlink designer for browsing files on the server*/
ul.multifileuploaderlist
{
	list-style-position: inside;
	overflow: auto;
	height: 250px;
	border-bottom: 5px solid #000;
	list-style-type: circle;
}
ul.multifileuploaderlist li
{
	border-bottom: 1px solid #cac6c6;
}
ul.multifileuploaderlist li input
{
	margin: 2px auto 2px 10px;
}
.multifileuploaderlist li img
{
	margin: auto auto auto 10px;
	cursor: pointer;
}
div.filebrowser-explorer
{
	overflow: auto;
	width: 100%;
	height: 150px;
}